<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1"><router-link to="/">主页</router-link></el-menu-item>
      <el-menu-item index="2" v-show="show"><router-link to="/login">登录</router-link></el-menu-item>
      <el-submenu index="2" v-show="!show">
        <template slot="title">我的工作台</template>
        <!-- <el-menu-item index="2-1">错题本</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu> -->
        <el-menu-item index="2-5">退出登录</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><router-link to="/exam">模拟考试</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="/chat/server">联系客服</router-link></el-menu-item>
      <el-menu-item index="5"><router-link to="/chat/user">模拟用户聊天</router-link></el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeIndex: '1',
      userinfo:[],
      show:true
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      if(key=="2-1"){
        this.$router.push("/ctbook")
      }else if(key=="2-5"){
        localStorage.removeItem("user")
        this.show=true;
      }
      // console.log(key, keyPath);
    }
  },
  created(){
    // 判断是否登录
    let a=JSON.parse(localStorage.getItem("user")|| "[]")
    if (a.length==0) {
      this.show=true;
    }else{
      this.show=false;
    }
  },
  watch:{
    "$route.path":function(val){
      // 判断是否登录
      if(val=='/'){
        let a=JSON.parse(localStorage.getItem("user")|| "[]")
        if (a.length==0) {
          this.show=true;
        }else{
          this.show=false;
        }
      }
    }
  }
};
</script>

<style scoped>
  a{
    text-decoration: none;
  }
</style>